<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .one{
            width:500px;
            height:400px;
            background-color:red;
            position:absolute;          /*1、单个标签设置，以浏览器左上角为基准移动*/
            /*left:20px;
            top:20px;*/
        }
        .two{
            width:300px;
            height:200px;
            background-color:pink;
           /* position:absolute;*/         /*2、父盒子中设置了绝对定位，子盒子是以父盒子的左上角为基准移动的*/
           /* left:30px; */                 /*如果父盒子中没有设置绝对定位，子盒子是以浏览器的左上角为基准移动的*/
           /* top:20px;*/
        }
        span{
            width:200px;
            height:300px;
            background-color:red;
            position:absolute;          /*4、可以进行模式转换*/
        }

    </style>
</head>
<body>

   <span>nihao</span>
   <!--<div class="one">-->
      <!-- <div class="two"></div>-->
  <!-- </div>
   <div class="two"></div> -->           <!--3、绝对定义不占位置，有浮动效果-->
</body>
</html>